Timeline Expand and Collapse Features #221
Merged
+460
−48
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
|
screen shots? |
tiffon
reviewed
Jun 28, 2018
| return ( | ||
| <span className="TimelineCollapser"> | ||
| <Tooltip title="Expand +1"> | ||
| <span className="anticon anticon-right" onClick={_onExpandOne} role={'button'} /> |
There was a problem hiding this comment.
I recommend using the ant Icon component.
| return dispatch(action); | ||
| }; | ||
| const collapseOne = spans => { | ||
| const action = actions.collapseOne(spans); |
There was a problem hiding this comment.
Typically, bindActionCreators from redux would be used to do this. Not sure why it's not used on line 83. Please change to use bindActionCreators.
| display: inline-block; | ||
| } | ||
|
|
||
| .TimelineCollapser > * { |
There was a problem hiding this comment.
Selectors like this are not really preferred; I suggest using something less general, if possible.
|
|
||
| .TimelineCollapser > * { | ||
| margin-right: 0.3rem; | ||
| transform: rotate(90deg); |
There was a problem hiding this comment.
Why would you want all of the icons rotated 90 degrees?
| onCollapseOne: (Span[]) => void, | ||
| onExpandOne: (Span[]) => void, | ||
| onExpandAll: () => void, | ||
| spans: Span[], |
There was a problem hiding this comment.
I suggest adding the spans in the TraceTimelineViewer component, so they don't need to be passed down.
| */ | ||
|
|
||
| .TimelineCollapser { | ||
| float: right; |
| if (shouldDisableCollapse(spans, state.childrenHiddenIDs)) { | ||
| return state; | ||
| } | ||
| const childrenHiddenIDs = spans.reduce((res, s) => { |
There was a problem hiding this comment.
Just curious, why prefer reduce over filter?
const childrenHiddenIDs = new Set(spans.filter(sp => sp.hasChildren));
Applies generally to these reducers.
| return { ...state, childrenHiddenIDs }; | ||
| } | ||
|
|
||
| function collapseAll(state, { payload }) { |
There was a problem hiding this comment.
Great work on these reducers, very simply implemented 👍
added 4 commits
June 29, 2018 16:21
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Codecov Report
@@ Coverage Diff @@
## master #221 +/- ##
==========================================
+ Coverage 89.21% 90.02% +0.81%
==========================================
Files 106 107 +1
Lines 2317 2366 +49
Branches 472 481 +9
==========================================
+ Hits 2067 2130 +63
+ Misses 211 198 -13
+ Partials 39 38 -1
Continue to review full report at Codecov.
|
added 5 commits
June 29, 2018 17:46
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
|
With Tooltips: With Popover: |
added 6 commits
July 2, 2018 18:14
This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
davit-y
changed the title
tiffon
suggested changes
Jul 5, 2018
| @@ -49,6 +49,10 @@ const descriptions = { | |||
| zoomInFast: 'Zoom in — Large', | |||
| zoomOut: 'Zoom out', | |||
| zoomOutFast: 'Zoom out — Large', | |||
| collapseAll: 'Collapse All', | |||
| expandAll: 'Expand All', | |||
| collapseOne: 'Collapse One', | |||
There was a problem hiding this comment.
Maybe this should be Collapse One Level and Expand One Level to make it clearer in the help modal?
|
|
||
| .ExpandBtn { | ||
| transform: rotate(90deg); | ||
| } |
There was a problem hiding this comment.
The ExpandBtn class should be scoped to TimelineCollapser to prevent clashes with other styles.
Also, if written in the following way both classes don't need to be added to the component:
.TimelineCollapser--btn,
.TimelineCollapser--btn-expand {
margin-right: 0.3rem;
}
.TimelineCollapser--btn-expand {
transform: rotate(90deg);
}| display: inline-block; | ||
| } | ||
|
|
||
| .TimelineCollapserBtn { |
There was a problem hiding this comment.
To be consistent with the other class names, can you rename this to TimelineCollapser--btn ?
| action: collapseOne, | ||
| initial: allSpansCollapsed, | ||
| resultant: allSpansCollapsed, | ||
| }, |
There was a problem hiding this comment.
Can you add a test case to cover the collapse one scenario going from [3] to [1, 3]?
| }, | ||
| ]; | ||
|
|
||
| dispatchTests.forEach(info => { |
There was a problem hiding this comment.
What do these tests cover the tests above don't?
Signed-off-by: Davit Yeghshatyan <davo@uber.com>
tiffon
approved these changes
Jul 6, 2018
tiffon
added a commit
that referenced
this pull request
Jul 31, 2018
* Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <joef@uber.com> Directed graph layout and presentation (#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <joef@uber.com> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <joef@uber.com> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <joef@uber.com> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <joef@uber.com> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <joef@uber.com> * Very rough React graph component Signed-off-by: Joe Farro <joef@uber.com> * Enable custom props for graph elements Signed-off-by: Joe Farro <joef@uber.com> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <joef@uber.com> * Make the jaeger-ui package private Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Fix issues with plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <joef@uber.com> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <joef@uber.com> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <joef@uber.com> * Adding new issue and pull request template (#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <joef@uber.com> * remove unecessary package Signed-off-by: Joe Farro <joef@uber.com> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <joef@uber.com> * Start the worker ID at 0 Signed-off-by: Joe Farro <joef@uber.com> Search page functionality for trace diffs Signed-off-by: Joe Farro <joef@uber.com> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <joef@uber.com> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <joef@uber.com> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <joef@uber.com> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <joef@uber.com> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <joef@uber.com> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <joef@uber.com> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <joef@uber.com> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <joef@uber.com> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <joef@uber.com> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <joef@uber.com> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <joef@uber.com> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <joef@uber.com> Add additional layout options to plexus Signed-off-by: Joe Farro <joef@uber.com> Lighten trace diff color scheme Signed-off-by: Joe Farro <joef@uber.com> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <joef@uber.com> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <joef@uber.com> Adding new issue and pull request template (#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> Integrate Google Analytics into Search Page (#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <davo@uber.com> Timeline Expand and Collapse Features (#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use Icon component Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use spans upstream Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Improve css Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove debug logging Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use popover Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Update changelog Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Make review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> Squashed commits from develop-directed-graph (#224) Signed-off-by: Joe Farro <joef@uber.com> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <joef@uber.com> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <joef@uber.com> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <joef@uber.com>
yurishkuro
pushed a commit
that referenced
this pull request
Aug 14, 2018
* Use Lerna (#209) * Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <joef@uber.com> Directed graph layout and presentation (#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <joef@uber.com> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <joef@uber.com> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <joef@uber.com> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <joef@uber.com> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <joef@uber.com> * Very rough React graph component Signed-off-by: Joe Farro <joef@uber.com> * Enable custom props for graph elements Signed-off-by: Joe Farro <joef@uber.com> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <joef@uber.com> * Make the jaeger-ui package private Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Fix issues with plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <joef@uber.com> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <joef@uber.com> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <joef@uber.com> * Adding new issue and pull request template (#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <joef@uber.com> * remove unecessary package Signed-off-by: Joe Farro <joef@uber.com> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <joef@uber.com> * Start the worker ID at 0 Signed-off-by: Joe Farro <joef@uber.com> Search page functionality for trace diffs Signed-off-by: Joe Farro <joef@uber.com> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <joef@uber.com> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <joef@uber.com> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <joef@uber.com> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <joef@uber.com> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <joef@uber.com> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <joef@uber.com> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <joef@uber.com> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <joef@uber.com> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <joef@uber.com> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <joef@uber.com> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <joef@uber.com> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <joef@uber.com> Add additional layout options to plexus Signed-off-by: Joe Farro <joef@uber.com> Lighten trace diff color scheme Signed-off-by: Joe Farro <joef@uber.com> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <joef@uber.com> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <joef@uber.com> Adding new issue and pull request template (#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> Integrate Google Analytics into Search Page (#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <davo@uber.com> Timeline Expand and Collapse Features (#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use Icon component Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use spans upstream Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Improve css Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove debug logging Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use popover Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Update changelog Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Make review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> Squashed commits from develop-directed-graph (#224) Signed-off-by: Joe Farro <joef@uber.com> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <joef@uber.com> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <joef@uber.com> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <joef@uber.com> * Typo Signed-off-by: Joe Farro <joef@uber.com> * Fix #232 Split leaf from parent nodes in the tree Signed-off-by: Joe Farro <joef@uber.com> * plexus - Fix chart style issues and bump version Also tweak the demo a bit. Signed-off-by: Joe Farro <joef@uber.com> * Fix yarn workspace based install Signed-off-by: Joe Farro <joef@uber.com> * In CI, fail if an update to yarn.lock is needed Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup Signed-off-by: Joe Farro <joef@uber.com> * Use stable yarn in CI Signed-off-by: Joe Farro <joef@uber.com> * Use yarn in package.json scripts Signed-off-by: Joe Farro <joef@uber.com> * Use newly downloaded yarn in CI Signed-off-by: Joe Farro <joef@uber.com>
vvvprabhakar
pushed a commit
to vvvprabhakar/jaeger-ui
that referenced
this pull request
Jul 5, 2021
* Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use Icon component Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use spans upstream Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Improve css Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove debug logging Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use popover Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Update changelog Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Make review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar
pushed a commit
to vvvprabhakar/jaeger-ui
that referenced
this pull request
Jul 5, 2021
* Use Lerna (jaegertracing#209) * Prep the repo for separately developed components * Fix uberinternal yarn.lock issues * Upgrade react to 16.3.2 * Update readme to account for on Lerna changes Signed-off-by: Joe Farro <joef@uber.com> Directed graph layout and presentation (jaegertracing#212) * Prep the repo for separately developed components Signed-off-by: Joe Farro <joef@uber.com> * WIP - Very rough graph layout functionality Signed-off-by: Joe Farro <joef@uber.com> * Graph layout functionality is in solid shape Outstanding: * tests * calculate edges via several workers when there are many edges Signed-off-by: Joe Farro <joef@uber.com> * Fix minor misc issues with plexus layout Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Fix uberinternal yarn.lock issues Signed-off-by: Joe Farro <joef@uber.com> * Upgrade react to 16.3.2 Signed-off-by: Joe Farro <joef@uber.com> * Upgrade flow to 0.71.0 Signed-off-by: Joe Farro <joef@uber.com> * Very rough React graph component Signed-off-by: Joe Farro <joef@uber.com> * Enable custom props for graph elements Signed-off-by: Joe Farro <joef@uber.com> * The graph refreshes when it gets new data Signed-off-by: Joe Farro <joef@uber.com> * Make the jaeger-ui package private Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup for plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Fix issues with plexus package.json Signed-off-by: Joe Farro <joef@uber.com> * Don't output a CSS file for plexus Signed-off-by: Joe Farro <joef@uber.com> * Increase plexus node spacing for neato layouts Signed-off-by: Joe Farro <joef@uber.com> * Update plexus to 0.0.1-dev.2 Signed-off-by: Joe Farro <joef@uber.com> * Adding new issue and pull request template (jaegertracing#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> * plexus readme, remove `LayoutManager.dispose()` Signed-off-by: Joe Farro <joef@uber.com> * remove unecessary package Signed-off-by: Joe Farro <joef@uber.com> * Add more complex graphs to plexus demo Signed-off-by: Joe Farro <joef@uber.com> * Start the worker ID at 0 Signed-off-by: Joe Farro <joef@uber.com> Search page functionality for trace diffs Signed-off-by: Joe Farro <joef@uber.com> Stub for trace diff page, update redux state shape - Better redux state shape for trace diff - Refer to traces selected for comparison as trace diff cohort - Better redux state shape for fetched trace data - Before: One loading prop to keep track of all search and individual trace fetching - After: Loading is tracked separately for serach and for each individual trace being fetched - This is better all around and lays the ground-work for fetching multiple individual traces which will be necessary for trace diff page when hit directly via URL (will need to fetch two or more traces) Signed-off-by: Joe Farro <joef@uber.com> Optimization for trace mini-map rendering On a trace with ~16k spans reduced minimap rendering from ~250ms to ~20ms. For context, the initial render of the trace was around 1.22s. Signed-off-by: Joe Farro <joef@uber.com> Redux cleanup, hydrate diff cohort on search page - Merge TraceSummary into Trace - Redux action to fetch multiple traces by ID - Create a small-sized variation of the loading indicator - SearchTracePage loads trace data for traces in the diff cohort - Show loading indicator when trace data is being loaded - Show inline error when trace loading fails - Strip failed traces from diff cohort when linking to diff page - Diff page forces redux state based on URL params Signed-off-by: Joe Farro <joef@uber.com> Trace diff page header functionality - Fetch traces that need to be loaded - Keep the URL and redux state in sync after changes to A or B - Allow entering traces by ID - Allow selecting other traces in the cohort - Indicate when loading a trace failed Signed-off-by: Joe Farro <joef@uber.com> Convert trace to a DAG Apply three transforms to spans when converting to DAG: - Adopt peer.service for service name when a client span is missing the corresponding server span - Ignore client spans when the only child is a reasonable server span - Try to figure out a better operation name when operation === the http.method tag The conversion can be optimized; it takes about 230ms on a trace with ~35k spans. A trace with ~9k spans takes about 50ms. Signed-off-by: Joe Farro <joef@uber.com> Add useDotEdges and totalMemory options to plexus - Option in plexus to set the totalMemory viz.js uses - Sometimes viz.js runs out of memory on large graphs, especially when using the neato engine, increasing the total memeory can help - Option in plexus to use dot edges in plexus graphs - Useful for trees (neato and plexus are very similar) or large graphs (neato is too slow) Signed-off-by: Joe Farro <joef@uber.com> Initial trace diff graph - Ability to create diff of two TraceDag instances - Additional transforms to trim superfluous nodes - skipAnnotationSpans - skipClientSpans Signed-off-by: Joe Farro <joef@uber.com> Add zoom and pan to plexus - Zoom and pan - Add graph state as param to setOn* props - Enable scaling edge stroke based on zoom level Signed-off-by: Joe Farro <joef@uber.com> Add zoom to trace diff and increase color contrast - Add zoom pan to trace diff - On node hover show node @ 1x zoom (useful when zoomed out) - Higher contrast colors for trace diff DAG - Allowing scrolling for errors - Fix issue with node sizing during measurement phase Signed-off-by: Joe Farro <joef@uber.com> Add a minimap to plexus to help zoom and pan Also added to trace-diffs Signed-off-by: Joe Farro <joef@uber.com> Guard plexus zoom functionality with a flag Signed-off-by: Joe Farro <joef@uber.com> Fixes and optimizations to plexus and trace diffs - Bug fix: Each graph should have a unique edge arrow def IRI - Keep strokes from scaling into invisibility when zooming - Remove redundant root node - Apply zoom transforms to the node and edge containers - Scale the arrow def based on the current zoom (when zoom is enabled) by scaling the coords in the marker and path definitions - Add a convenience prop-factory that toggles a class, "is-small", based on the current zoom level - Use "is-small" to toggle the visibility of node text and edge stroke width based on the current zoom level - Change prop factories to be grouped by feature instead of context - In many cases the prop factory can be applied to multiple contexts, e.g. to both the edges container and an edge path - Make Node and EdgePath components PureComponents - Wrap rendering the nodes and edges in a PureComponent to prevent unnecessary renders - Remove DirectedGraphState from the edge and node factory prop functions to prevent rendering with every transform change Signed-off-by: Joe Farro <joef@uber.com> Add additional layout options to plexus Signed-off-by: Joe Farro <joef@uber.com> Lighten trace diff color scheme Signed-off-by: Joe Farro <joef@uber.com> Use green instead of blue in trace diff coloring Green is more commonly used to show additions Signed-off-by: Joe Farro <joef@uber.com> Add "Compare" to the top nav and other small fixes Signed-off-by: Joe Farro <joef@uber.com> Adding new issue and pull request template (jaegertracing#219) Signed-off-by: Prakriti <prakritibansal98@gmail.com> Integrate Google Analytics into Search Page (jaegertracing#220) * Integrate GA into search page Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove tracking of actual values Signed-off-by: Davit Yeghshatyan <davo@uber.com> Timeline Expand and Collapse Features (jaegertracing#221) * Add expansion and collapsing features Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use Icon component Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use spans upstream Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Improve css Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Rotate collapse buttons Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove debug logging Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Remove spans from TimelineHeaderRow Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add unit test for TimelineCollapser Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Use popover Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add TimelineCollapser test Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Revert "Use popover" This reverts commit 6152402 Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for duck.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add more tests for index.js Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Add keyboard shortcuts Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Update changelog Signed-off-by: Davit Yeghshatyan <davo@uber.com> * Make review changes Signed-off-by: Davit Yeghshatyan <davo@uber.com> Squashed commits from develop-directed-graph (jaegertracing#224) Signed-off-by: Joe Farro <joef@uber.com> Lazily initialize the first worker in plexus Signed-off-by: Joe Farro <joef@uber.com> Fix issue with trace diff URL from auth redirects The trace diff url was of the form: /trace/<trace-a-id>:diff?b=<trace-b-id> But, during OneLogin / SAML auth redirects it would get URL encoded and then not URL decoded resulting in it being interpreted as a trace ID. Move to the following form with three literal periods between the IDs: /trace/<trace-a-id>...<trace-b-id> Other misc fixes and tweaks: - Fix an issue where selecting a cohort of traces and then clicking the "Compare" button in the top nav cleared the cohort - Fix an issue where removing a trace from the cohort on the search page would not clear the trace from A or B, effectively preventing traces set as A or B from ever being removed - Clean up route definitions Signed-off-by: Joe Farro <joef@uber.com> Fix trace detail tracking for revised redux shape Signed-off-by: Joe Farro <joef@uber.com> * Typo Signed-off-by: Joe Farro <joef@uber.com> * Fix jaegertracing#232 Split leaf from parent nodes in the tree Signed-off-by: Joe Farro <joef@uber.com> * plexus - Fix chart style issues and bump version Also tweak the demo a bit. Signed-off-by: Joe Farro <joef@uber.com> * Fix yarn workspace based install Signed-off-by: Joe Farro <joef@uber.com> * In CI, fail if an update to yarn.lock is needed Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup Signed-off-by: Joe Farro <joef@uber.com> * Use stable yarn in CI Signed-off-by: Joe Farro <joef@uber.com> * Use yarn in package.json scripts Signed-off-by: Joe Farro <joef@uber.com> * Use newly downloaded yarn in CI Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Which problem is this PR solving?
Short description of the changes
Todo